<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--
  Created by IntelliJ IDEA.
  User: SunKai
  Date: 14-11-11
  Time: 上午11:49
  To change this template use File | Settings | File Templates.
--%>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap-table.css">
    <link rel="stylesheet" href="/public/jquery.uploadify/uploadify.css">
    <link rel="stylesheet" type="text/css" href="/static/agreement/fontawesome-4.2.0/css/font-awesome.min.css">
    <title>度假屋详细信息</title>
</head>
<body>
<form:form class="form-horizontal" role="form" commandName="houseInfo" action="/house/info/form"
           enctype="multipart/form-data">
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label for="houseName" class="col-sm-2 control-label">度假屋名称</label>

            <div class="col-sm-10">
                <form:input path="name" id="houseName" placeholder="请输入度假屋名称" cssClass="form-control input-lg"/>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label for="houseFeature" class="col-sm-2 control-label">度假屋描述</label>

            <div class="col-sm-10">
                <form:input path="houseFeature" id="houseFeature" placeholder="请输入度假屋描述"
                            cssClass="form-control input-lg"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label for="price" class="col-sm-2 control-label">价格</label>

            <div class="col-sm-10">
                <form:input path="price" id="price" placeholder="请输入价格" cssClass="form-control input-lg"/>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label for="price" class="col-sm-2 control-label">是否精选</label>

            <div class="col-sm-10">
                <form:radiobutton path="fineRoom" value="1"/>精选
                <form:radiobutton path="fineRoom" value="0"/>非精选
            </div>
        </div>
    </div>


    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label class="col-sm-2 control-label">配套</label>

            <div class="col-sm-offset-2">
                <c:forEach items="${houseInfo.supportingDTOs}" var="supportingDTO">
                    <label class="checkbox-inline">
                        <input type="checkbox" value="${supportingDTO.guid}"
                               name="supportingAsStrings" class="supportingAsStrings"> ${supportingDTO.name}
                    </label>
                </c:forEach>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label class="col-sm-2 control-label">设施</label>

            <div class="col-sm-offset-2 ">
                <c:forEach items="${houseInfo.equipmentDTOs}" var="equipmentDTO">
                    <label class="checkbox-inline">
                        <input type="checkbox" value="${equipmentDTO.guid}"
                               name="equipmentAsStrings" class="equipmentAsStrings"> ${equipmentDTO.name}
                    </label>
                </c:forEach>
            </div>
        </div>
    </div>
    <div style="display: none">
        <c:forEach items="${supportingDTOs}" var="supportingDTO">
            <label class="checkbox-inline">
                <input type="checkbox" value="${supportingDTO.guid}"
                       name="supportingAsStrings1" class="supportingAsStrings1"> ${supportingDTO.name}
            </label>
        </c:forEach>
        <c:forEach items="${equipmentDTOs}" var="equipmentDTO">
            <label class="checkbox-inline">
                <input type="checkbox" value="${equipmentDTO.guid}"
                       name="equipmentAsStrings1" class="equipmentAsStrings1"> ${equipmentDTO.name}
            </label>
        </c:forEach>
    </div>
    <div style="text-align: center">
        <img src="/public/image/${houseInfo.titleImageGuid}" style="width:50px;height:70px" name="titleImage">
    </div>
    <div class="col-sm-offset-2 col-sm-10">
        <label for="price" class="col-sm-2 control-label">标题图片</label>

        <div class="col-sm-10">
            <input type="file" name="titleImage"/>
        </div>
    </div>
    <div>
        <div class="col-sm-offset-2 col-sm-10">
            <label class="col-sm-2 control-label">额外费用</label>

            <div class="col-sm-10 ">
                <div style="display: none">
                    <c:if test="${houseInfo.houseExtraFeeDTOs==null}">
                        <form:input path="houseExtraFeeDTOs[0].title" cssClass="etitle" placeholder="标题"/>
                        <form:input path="houseExtraFeeDTOs[0].price" placeholder="价格"/>
                    </c:if>
                </div>
                <c:if test="${houseInfo.houseExtraFeeDTOs!=null}">
                    <c:forEach items="${houseInfo.houseExtraFeeDTOs}" var="houseExtraFeeDTO" varStatus="status">
                        <div class="extraFee">
                            <input type="text" value="${houseExtraFeeDTO.title}" cssClass="etitle" placeholder="标题"
                                   class="houseExtraFeeDTOs" name="houseExtraFeeDTOs[${status.index}].title">
                            <input type="text" value="${houseExtraFeeDTO.price}" cssClass="etitle" placeholder="价格"
                                   class="houseExtraFeeDTOs" name="houseExtraFeeDTOs[${status.index}].price">
                            <a href="javascript:delExtraFee('${houseExtraFeeDTO.guid}')">删除</a>
                        </div>
                    </c:forEach>
                </c:if>
            </div>
            <div style="text-align: center">
                <a href="javascript:addExtraFee()">添加</a>
            </div>
        </div>
    </div>

    <div class="col-sm-offset-2 col-sm-10">
        <label for="price" class="col-sm-2 control-label">标题</label>

        <div class="col-sm-10">
            <form:input path="title" placeholder="标题" cssClass="form-control input-lg"/>
        </div>
    </div>
    <div>
        <div style="text-align: center" id="houseBaseImgs">
            <c:if test="${houseInfo.imageGuids!=null}">
                <c:forEach items="${houseInfo.imageGuids}" var="images" varStatus="status">
                    <div class="houseBaseImgDiv">
                    <img src="/public/image/${images}" style="width:50px;height:70px"
                         class="houseBaseImg" id="hbImg_${status.index}" name="">
                    <input type="hidden" name="imageGuids" value="${images}">
                    <img src="/public/img/x.png"
                         class="delImg" onclick="delImg(this)" id="delImg_${status.index}">
                    </div>
                </c:forEach>
            </c:if>
        </div>
        <div class="col-sm-offset-2 col-sm-10">
            <label class="col-sm-2 control-label">度假屋图片</label>

            <div class="col-sm-10">
                    <%--<input type="file" id="firstImage" name="images">--%>
                <input type="file" id="file_upload_1" name="updataimage">
                <a id="addImage" style="display:none">添加</a>&nbsp;
                <a id="delImage" style="display:none">删除</a>
            </div>
        </div>
    </div>
    <div class="col-sm-offset-2 col-sm-10">
        <label for="price" class="col-sm-2 control-label">合同内容</label>

        <div class="col-sm-10">
            <textarea rows="30" cols="50" name="content">${agreementDTO.content}</textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label class="col-sm-2 control-label"></label>

            <div class="col-sm-10">
                <form:hidden path="buildingTypeGuid"/>
                <form:hidden path="guid"/>
                <input type="submit" id="btnHtml" value="保存"/>
            </div>
        </div>
    </div>
</form:form>
<script type="text/javascript" src="/static/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/ckeditor/4.5.4/ckeditor.js"></script>
<script src="/public/jquery.uploadify/jquery.uploadify.min.js"></script>
<script>
    $(function () {
        $("#firstImage").change(function () {
            $("#addImage").show();
            $("#delImage").show();
        });
        $("#addImage").click(function () {
            var content = '<input type="file"  name="images">';
            if ($(":file").length < 5) {
                $(":file:last").after(content);
            }
        });
        $("#delImage").click(function () {
            if ($(":file").length > 1) {
                $(":file:last").remove();
            } else {
                $(":file:last").val("");
            }
        });

        $(".supportingAsStrings1").each(function () {
            var v = $(this).val();
            $(".supportingAsStrings").each(function () {
                if (v == $(this).val()) {
                    $(this).attr("checked", true);
                }
            });
        });

        $(".equipmentAsStrings1").each(function () {
            var v = $(this).val();
            $(".equipmentAsStrings ").each(function () {
                if (v == $(this).val()) {
                    $(this).attr("checked", true);
                }
            });
        });


    });


    function addExtraFee() {
        var number = $(".extraFee");
        var content = '<div class="col-sm-10 extraFee">';
        content += $(".extraFee").html();
        content += "</div>";
        <%--var content = "<div class=\"col-sm-10 extraFee\"><form:input path="houseExtraFeeDTOs[0].title" placeholder="标题"/><form:input path="houseExtraFeeDTOs[0].price" placeholder="价格"/></div>";--%>
        content = content.replace(/[0-9]/g, number.length);
        console.log(number.length);
        console.log(content);
        number.eq(number.length - 1).after(content);
    }

    function delExtraFee(guid) {
        $.ajax({
            url: "/house/info/delHouseExtraFee",
            type: "POST",
            dataType: "json",
            data: "guid=" + guid,
            success: function (data) {
                location.reload();
            }
        })
    }

    function delImg(v) {
        var guid = $("#guid").val();
        $(v).parent(".houseBaseImgDiv").remove();
    }
    $("#file_upload_1").uploadify({
        fileObjName: "filename",
        buttonText: "上传图片",
        method: "post",
        height: 30,
        swf: '/public/jquery.uploadify/uploadify.swf',
        uploader: '/house/info/updataimage',
        width: 120,
        onUploadSuccess: function (filedata, data, req) {
            var index = $(".houseBaseImg").length + 1
            var _html = '<div class="houseBaseImgDiv"><img src="/public/image/' + data + '" style="width:50px;height:70px"class="houseBaseImg" id="hbImg_' + index + '" name=""> <input type="hidden" name="imageGuids" value="' + data + '"> <img src="/public/img/x.png" class="delImg" onclick="delImg(this)" id="delImg_' + index + '"></div>'
            $("#houseBaseImgs").append(_html)
        }
    });
    CKEDITOR.replace('content');
</script>
</body>
</html>